<template>
  <div class="top_blog blogs">
    <ul>
      <li
        v-for="item in articles"
        :key="item.id"
      >
        <a
          href="javascript:void(0);"
          @click="clickFn(item)"
        >
          <i>
            <img
              :src="imgs(item.image)"
              alt=""
            />
          </i>
          <h2>{{ item.title }}</h2>
        </a>
        <p class="blog_text">
          {{ delHtmlTag(item.content) }}
        </p>
        <p class="blog_info">
          <span>{{ item.created_at.slice(0, 10) }}</span>
          <span>lmb</span>
          <span>{{ fromArticle(item.channel_id) }}</span>
          <span>{{ item.browse }}</span>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    articles: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {
      baseURL: this.baseURL
    }
  },
  computed: {
    imgs: function () {
      return function (img) {
        return img === ''
          ? require('../assets/static.png')
          : `${this.baseURL}/uploads/${img.split(',')[0]}`
      }
    },
    fromArticle: function () {
      return function (v) {
        switch (v) {
          case 1:
            return '博客日记'
          case 2:
            return '闲言碎语'
          case 3:
            return '语录簿'
          case 4:
            return '相册'
          default:
            return '心情'
        }
      }
    }
  },
  methods: {
    // 去掉html字符串中的所有标签元素
    delHtmlTag(str) {
      return str.replace(/<[^>]+>/g, '')
    },
    clickFn(v) {
      switch (v.channel_id) {
        case 1: // 博客日记
          this.$router.push({
            path: '/bokeriji',
            query: {
              id: v.id
            }
          })
          break
        case 2: // 闲言碎语
          this.$router.push({
            path: '/xianyansuiyu',
            query: {
              id: v.id
            }
          })
          break
        case 4: // 相册
          this.$router.push({
            path: '/wodexiangce',
            query: {
              id: v.id
            }
          })
          break
        default:
          this.$router.push({
            path: '/yulubu',
            query: {
              id: v.id
            }
          })
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@media only screen and (max-width: 480px) {
  body .top_blog ul li {
    padding: 15px 10px;
    margin-bottom: 12px;
    a {
      i {
        width: 140px;
        height: 100px;
        margin-right: 10px;
      }
      h2 {
        font-size: 16px;
      }
    }
  }
}

.top_blog {
  ul li::after {
    position: absolute;
    content: '';
    right: 10px;
    top: 40px;
    border-style: solid;
    border-width: 0 13px 13px 13px;
    border-color: #e01109 #e01109 transparent #e01109;
  }
  li:nth-child(1)::before {
    content: '1';
  }
  li:nth-child(2)::before {
    content: '2';
  }
  li:nth-child(3)::before {
    content: '3';
  }
  li::before {
    background: #e01109;
    position: absolute;
    content: '';
    right: 10px;
    top: 0;
    width: 26px;
    height: 30px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    padding: 10px 0 0 0;
  }
}
.blogs {
  ul li:hover {
    // -webkit-transform: scale(1.1);
    // -moz-transform: scale(1.1);
    // -o-transform: scale(1.1);
    // -ms-transform: scale(1.1);
    // box-shadow: #dddddd 3px 5px 5px;
    // box-shadow: 1px 1px 0.3px -16px rgba(0, 0, 0, -0.003),
    //   4.9px 4.9px 3.9px -16px rgba(0, 0, 0, 0.003),
    //   14.1px 14.1px 12.8px -16px rgba(0, 0, 0, 0.015),
    //   34.7px 34.7px 31.2px -16px rgba(0, 0, 0, 0.035),
    //   100px 100px 82px -16px rgba(0, 0, 0, 0.07);
    box-shadow: 8px 8px 16px #cccbcb, -8px -8px 16px #ffffff;
    // transition: 0.5s;
  }
  ul li:hover img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
  }
  ul li {
    list-style: none;
    overflow: hidden;
    margin-bottom: 20px;
    background: #fff;
    padding: 20px;
    position: relative;
    text-align: left;
    border-radius: 8px;
    box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
    a {
      color: #222;
      text-decoration: none;
      i {
        display: block;
        width: 160px;
        height: 110px;
        overflow: hidden;
        float: left;
        margin-right: 20px;
        img {
          width: 100%;
          height: 110px;
          transition: 0.5s;
          object-fit: cover;
        }
      }
      h2 {
        margin: 0 0 14px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 18px;
        display: block;
      }
    }
    .blog_text {
      overflow: hidden;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      font-size: 14px;
      color: #666;
      margin-bottom: 14px;
      word-wrap: break-word;
      word-break: break-all;
    }
    .blog_info {
      color: #888;
      font-size: 13px;
      span {
        margin-right: 15px;
        position: relative;
        padding-left: 20px;
        line-height: 20px;
      }
      // span:nth-child(n):before {
      //   position: absolute;
      //   content: "";
      //   width: 20px;
      //   height: 20px;
      //   left: 0;
      //   top: 0;
      // }
      span:nth-child(1) {
        background: url(../assets/icon.png) no-repeat 0 0;
        background-size: 18px;
      }
      span:nth-child(2) {
        background: url(../assets/icon.png) no-repeat 0 -18px;
        background-size: 18px;
      }
      span:nth-child(3) {
        background: url(../assets/icon.png) no-repeat 0 -36px;
        background-size: 18px;
        color: #518f97;
      }
      span:nth-child(4) {
        background: url(../assets/icon.png) no-repeat 0 -54px;
        background-size: 18px;
      }
    }
  }
}
</style>
